<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员管理系统</title>
    <style>
        .main {
            width: 80%;
            margin: 0 auto;
            text-align: center;
            /* background: green; */
        }

        .red {
            color: red;
        }

        .none {
            display: none;
        }
    </style>
</head>
<body>
<div class="main">
    <?php include_once 'nav.php'; ?>

    <form action="postLogin.php" method="post" onsubmit="return check()">
        <table align="center" border="1" style="border-collapse: collapse" cellpadding="10">
            <tr>
                <td>用户名<?php echo $_SESSION['loggedUserName'] ?></td>
                <td><input type="text" name="userName"><span class="red none">*</span></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="pwd"><span class="red none">*</span></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</div>

<script>
    function check() {
        let userName = document.getElementsByName('userName')[0].value.trim();
        let pwd = document.getElementsByName('pwd')[0].value.trim();

        // 用户验证
        let userNameReg = /^[a-zA-Z0-9]{3,10}$/;
        if (!userNameReg.test(userName)) {
            alert("用户名必填，且只能由大小写字符和数字组成，长度在3到10个字符!");
            return false;
        }

        // 密码验证
        let pwdReg = /^[a-zA-Z0-9_*]{6,10}$/;
        if (!pwdReg.test(pwd)) {
            alert("密码必填,且只能大小写和数字,以及*_构成,长度为6到10个字符!");
            return false;
        }

        return true;
    }
</script>
</body>
</html>